<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像展示</title>
    <style>
        body { display: flex; font-family: Arial, sans-serif; }
        #months { width: 200px; padding: 10px; border-right: 1px solid #ccc; }
        #months div { padding: 8px; cursor: pointer; border-bottom: 1px solid #eee; }
        #months div:hover { background: #f0f0f0; }
        #images { flex: 1; padding: 10px; display: flex; flex-wrap: wrap; gap: 10px; }
        img {
            max-width: 100%;  /* 图片自适应宽度 */
            border: 1px solid #ddd;
            padding: 5px;
            display: block;  /* 让每张图片单独占据一行 */
            margin: 10px auto; /* 居中对齐 */
        }
        .date-label {
            font-weight: bold;
            text-align: center;
            font-size: 32px;  /* 设置字体大小 */
            margin-bottom: 10px;
        }

    </style>
</head>
<body>
    <div id="months"></div>
    <div id="images"></div>

    <script>
        async function loadImages() {
            const res = await fetch("/api/vt/vt_parm_curve_images");
            const data = await res.json();

            const monthsDiv = document.getElementById("months");
            const imagesDiv = document.getElementById("images");

            monthsDiv.innerHTML = "";
            imagesDiv.innerHTML = "";

            Object.keys(data).forEach(month => {
                const monthDiv = document.createElement("div");
                monthDiv.textContent = month;
                monthDiv.onclick = () => showImages(month, data[month]);
                monthsDiv.appendChild(monthDiv);
            });

            if (Object.keys(data).length > 0) {
                showImages(Object.keys(data)[0], data[Object.keys(data)[0]]);
            }
        }

        function showImages2(month, images) {
            const imagesDiv = document.getElementById("images");
            imagesDiv.innerHTML = "";
            images.forEach(imgPath => {
                const imgElement = document.createElement("img");
                imgElement.src = `/vt_parm_images/${imgPath}`;
                imagesDiv.appendChild(imgElement);
            });
        }
        function showImages(month, images) {
            const imagesDiv = document.getElementById("images");
            imagesDiv.innerHTML = "";

            images.forEach(imgPath => {
                const container = document.createElement("div");

                // 提取日期（文件名格式：2025-03-16_plot.png）
                const dateMatch = imgPath.match(/(\d{4}-\d{2}-\d{2})_plot\.png$/);
                const dateText = dateMatch ? dateMatch[1] : "未知日期";

                const dateElement = document.createElement("div");
                dateElement.textContent = dateText;
                dateElement.className = "date-label"; // 让日期加粗

                const imgElement = document.createElement("img");
                imgElement.src = `/vt_parm_images/${imgPath}`;

                container.appendChild(dateElement);
                container.appendChild(imgElement);
                imagesDiv.appendChild(container);
            });
        }




        loadImages();
    </script>
</body>
</html>
